<template>
  <selfForm ref="selectForm" :form="form" :form-item="formItem" label-position="right" label-suffix=":" size="small" :rules="rules" @onPass="handlePass">
    <template #mulBtn>
      <el-button type="primary" @click.stop="handleQueryClick">查询</el-button>
      <el-button @click.stop="handleResetClick">重置</el-button>
    </template>
  </selfForm>
</template>

<script>
export default {
  name: 'DemoForm',
  data() {
    return {
      form: {
        name: '',
        professor: '',
        gender: 1,
        likes: [],
        text: '你好，👬',
        dateRange: [],
        detailTime: '',
        time: '',
        arr: []
      },
      formItem: [
        {
          type: 1,
          label: '姓名',
          key: 'name',
          tagAttrs: {
            placeholder: '请输入姓名',
            maxlength: 10,
            clearable: true
          }
        },
        {
          type: 2,
          label: '职业',
          key: 'professor',
          tagAttrs: {
            placeholder: '请选择职业',
            clearable: true,
            filterable: true
          },
          options: [
            {
              label: '学生',
              value: 1
            },
            {
              label: '厨师',
              value: 2
            },
            {
              label: '互联网工程师',
              value: 3
            }
          ]
        },
        {
          type: 3,
          label: '性别',
          key: 'gender',
          tagAttrs: {
            placeholder: '请选择性别'
          },
          options: [
            {
              label: '男',
              value: 1
            },
            {
              label: '女',
              value: 2
            }
          ]
        },
        {
          type: 4,
          label: '爱好',
          key: 'likes',
          tagAttrs: {
            placeholder: '请选择爱好'
          },
          options: [
            {
              label: '篮球',
              value: 1
            },
            {
              label: '排球',
              value: 2
            },
            {
              label: '羽毛球',
              value: 3
            },
            {
              label: '棒球',
              value: 4
            }
          ]
        },
        {
          type: 6,
          label: '多选器',
          key: 'arr',
          tagAttrs: {
            placeholder: '请选择',
            clearable: true
          },
          options: [
            {
              value: 'zhinan',
              label: '指南',
              children: [{
                value: 'shejiyuanze',
                label: '设计原则',
                children: [{
                  value: 'yizhi',
                  label: '一致'
                }, {
                  value: 'fankui',
                  label: '反馈'
                }, {
                  value: 'xiaolv',
                  label: '效率'
                }, {
                  value: 'kekong',
                  label: '可控'
                }]
              }]
            }]
        },
        {
          type: 7,
          label: '文本',
          key: 'text'
        },
        {
          type: 5,
          label: '时间范围',
          key: 'dateRange'
        },
        {
          type: 5,
          label: '详细时间',
          key: 'detailTime',
          dateType: 'datetime',
          tagAttrs: {
            placeholder: '请选择年月日时分秒'
          }
        },
        {
          type: 5,
          label: '时间',
          key: 'time',
          dateType: 'date',
          tagAttrs: {
            placeholder: '请选择年月日'
          }
        },
        {
          type: 'mulBtn',
          slot: true,
          offset: 16,
          class: 'btn-right'
        }
      ],
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        professor: [
          { required: true, message: '请选择职业', trigger: 'change' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        likes: [
          { required: true, message: '请选择爱好', trigger: 'change' }
        ],
        dateRange: [
          { required: true, message: '请选择时间范围', trigger: 'change' }
        ],
        time: [
          { required: true, message: '请选择时间', trigger: 'change' }
        ],
        detailTime: [
          { required: true, message: '请选择详细时间', trigger: 'change' }
        ],
        arr: [
          { required: true, message: '请选择详', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    // 校验通过
    handlePass() {
      this.$emit('query', this.form)
    },
    // 校验通过
    handleQueryClick() {
      this.$refs.selectForm.submitForm()
    },
    // 重置表单
    handleResetClick() {
      this.$refs.selectForm.resetForm()
    }
  }
}
</script>

<style>

</style>
